<template>
  <!-- 料牌设置 -->
  <div class="materialCard">
    <el-form :model="form" :rules="rules" ref="form">
      <div class="title">料牌类型设置</div>
      <el-form-item prop="resource">
        <el-radio-group v-model="form.resource" style="display: flex;justify-content: space-around;">
          <div style="width: 29%">
            <div style="margin-bottom: 20px;">
              <el-radio label="1" style="margin-bottom: 20px;">小料牌-1(110*40mm)</el-radio>
              <img style="width: 63%;" src="@/assets/temporary-images/l1.png" alt="" />
            </div>
            <div>
              <el-radio label="2" style="margin-bottom: 20px;">小料牌-2(120*40mm)</el-radio>
              <img style="width: 73%;" src="@/assets/temporary-images/l2.png" alt="" />
            </div>
          </div>
          <div style="width: 69%;display: flex;justify-content: space-around;">
            <div style="width: 49%;">
              <el-radio label="3" style="margin-bottom: 20px;">大料牌-1 (150*100mm)</el-radio>
              <img style="width: 80%;" src="@/assets/temporary-images/l3.png" alt="" />
            </div>
            <div style="width: 49%;">
              <el-radio label="4" style="margin-bottom: 20px;">大料牌-2 (150*100mm)</el-radio>
              <img style="width: 80%;" src="@/assets/temporary-images/l4.png" alt="" />
            </div>
          </div>
        </el-radio-group>
      </el-form-item>
      <div class="title">构件牌设置</div>
      <el-form-item prop="resource">
        <el-radio-group v-model="form.resource">
          <el-radio label="1">只显示构件名称</el-radio>
          <el-radio label="2">汇总并显示料牌号</el-radio>
        </el-radio-group>
        <el-col :span="24">
          <div class="tips">提示：构件牌可汇总显示所属该构件下的料牌号（所属不同构件的半成品合并为同一料牌加工时不支持显示该料牌号）</div>
        </el-col>
      </el-form-item>
      <div class="title">料牌信息设置</div>
      <el-form-item prop="type">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="1">打印料牌号</el-checkbox>
          <el-checkbox label="2">打印料单信息</el-checkbox>
          <el-checkbox label="3">打印构件信息</el-checkbox>
        </el-checkbox-group>
        <el-col :span="24">
          <div class="tips">提示：如果某项未勾选，则新生料牌不显示相关信息。</div>
        </el-col>
      </el-form-item>
      <el-form-item prop="resource">
        <el-radio-group v-model="form.resource">
          <el-radio label="1">显示料牌分捆根数</el-radio>
          <el-radio label="2">不显示料牌分捆根数</el-radio>
        </el-radio-group>
        <el-col :span="24">
          <div class="tips">提示：如果选择不显示料牌分捆根数，在打印的分捆料牌中将只显示总根数，不显示分捆根数。</div>
        </el-col>
      </el-form-item>
    </el-form>

    <div class="submitForm">
      <el-button type="primary" @click="preservation">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "MaterialCard",
  components: {},
  props: {},
  data() {
    return {
      form: {
        resource: "",
        type: []
      },
      rules: {
        // resource: [
        //   { required: true, message: "请选择活动资源", trigger: "change" },
        // ],
        // type: [
        //   { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        // ],
      },
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    preservation() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          console.log(this.form);
        }
      })
    },
  },
};
</script>

<style scoped lang="scss">
.materialCard {
  .title {
    font-weight: 500;
    font-size: 16px;
    color: rgb(16, 16, 16);
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(220, 221, 223);
    margin-bottom: 20px;
  }
}
</style>
